$(function () {
  // const layer = layui.layer
  const form = layui.form

  let option = {
    tagname: '',
    page: 1,
    limit: 10
  }
  //数据渲染和分页==============================
  render()
  function render() {
    axios({
      method: 'get',
      url: '/ydd_tag/list',
      params: option,
      headers: { 'x-token': localStorage.getItem('x-token') }

    }).then(({ data: { data: { data, count } } }) => {
      const htmlstr = data.map(({ id, tagname }, i) => {
        return ` <tr>
        <td>${i + 1}</td>
        <td>${id}</td>
        <td>${tagname || ''}</td>
        <td>
          <ul class="right handler">
            <li class="change">
              <i class="layui-icon layui-icon-edit btn-edit " data-id=${id} ></i>
            </li>
            <li class="del">
              <i class="layui-icon layui-icon-delete btn-delete" data-id=${id}></i>
            </li>
          </ul>
        </td>
      </tr>`
      }).join('')
      $('tbody').html(htmlstr)
      // 分页器
      layui.use('laypage', function () {
        const laypage = layui.laypage;
        //执行一个laypage实例
        laypage.render({
          elem: 'page',//注意，这里的 test1 是 ID，不用加 # 号
          count,//数据总数，从服务端得到
          curr: option.page,
          limit: option.limit,
          limits: [5, 10, 15, 20, 30],// 如果 layout 参数开启了 limit，则会出现每页条数的select选择框
          layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],//自定义排版,页面显示元素
          // 分页器的每项值改动都会调用这个回调函数
          jump: function (obj, first) {// obj 为每次分页器改变后的新值,
            // first来控制是过滤只要分页器直接改变时才执行的代码
            option.page = obj.curr
            option.limit = obj.limit
            if (!first) {
              render()
            }
          }
        })
      })

    })
  }


  //搜索然后渲染页面，拿到值
  $('#sousuo').on('submit', function (e) {
    // alert('弹出')
    e.preventDefault()
    let tagname = $('#tags').val()
    option.tagname = tagname
    // console.log(tagname);
    option.page = 1
    // option.limit = 1
    render()
  })
  // ========== 重置功能  =================

  $('.reset').on('click', () => {
    const obj = { page: 1, limit: 10, tagname: '' }
    Object.assign(option, obj)
    // $('.search')[0].reset()
    render()
  })
  // ========== 点击按钮 显示和隐藏上方文本框  ==========
  $('#close').on('click', function () {
    $('.search').hide()
    $('#close').hide()
    $('#open').show()
  })
  $('#open').on('click', function () {
    $('.search').show()
    $('#open').hide()
    $('#close').show()
  })
 // ========== 刷新功能 ==========
 $('#refresh').on('click', function () {
  self.location.reload()
})
    //  ========== 点击新增分类按钮，显示弹层  ==========
    let addFormStr = `
          <form class="layui-form" id="form-add" lay-filter="formEdit">
          <input type="hidden" name="Id">
          <div id="layui-form-item" style="margin-left: 60px;">
            <label class="layui-form-label" style="width: 76px; margin-top: 4px;"><i style="color: red; margin-right: 2px;">*</i> 标签名称：</label>
             <input type="text" name="tagname" required lay-verify="required" style="margin-top: 60px; width: 400px;" placeholder="请输入标签名称" autocomplete="off"
                class="layui-input" id="layui-input">
          </div>

          <!-- 按钮 -->
          <div class="layui-form-item">
            <div class="layui-input-block" style="margin-top: 50px; margin-left:544px;">
              <button type="reset" class="layui-btn layui-btn-primary" style="margin-right: 10px;" id="cancel">取消</button>
              <button class="layui-btn" lay-submit lay-filter="formDemo" style="background-color: #409eff;">确定</button>
            </div>
          </div>
        </form>`
    let layerIndex;
    $('#add_cate').on('click', function () {
        // 弹出一个添加标签信息的层
        layerIndex = layer.open({
            type: 1, // 层的类型，1表示页面层
            area: ['850px', '350px'],// 宽度高度
            title: '添加标签',// 标题
            content: addFormStr // 内容
        })
    })
   // ========== 新增分类功能 - 发送axios请求 ==========
    // 表单form是动态创建要事件委托

  $('body').on('submit','#form-add',function(e){
    e.preventDefault()
    const data = $(this).serialize()
    axios.post('/ydd_tag/add',data).then(({status})=>{
      if(status !== 200){
        return layer.msg('添加失败',{icon:5,time:2000})
      }
      layer.msg('添加成功！',{icon:1,time:2000})
      layer.close(layerIndex)
      render()
    })
  })

    //  ========== 点击编辑按钮，显示弹层  ==========
    let editFormStr = `
        <form class="layui-form" id="form-edit" lay-filter="formEdit">
            <!-- 隐藏的id -->
             <div class="layui-form-item" style="display:none">
                <label class="layui-form-label ct" style="text-align:right"><span style="color:red">* </span>ID名称</label>
                <div class="layui-input-block">
                    <input type="text" name="id" lay-verify="required" placeholder="请输入ID" autocomplete="off" class="layui-input" style="width:400px">
                </div>
            </div>
            <!-- 标签名称 -->
            <div id="layui-form-item" style="padding-left: 100px;">
                <label class="layui-form-label" style="width: 76px; margin-top: 4px;"><i style="color: red; margin-right: 2px;">*</i> 标签名称：</label>
                <div class="layui-input-block" style="margin-left: 80px;" >
                <input type="text" name="tagname" id="ipt" required lay-verify="required" style="margin-top: 60px; width: 400px;" placeholder="请输入新的标签名称" autocomplete="off"
                    class="layui-input" id="layui-input">
                </div>
            </div>
            <!-- 按钮 -->
            <div class="layui-form-item">
                <div class="layui-input-block" style="margin-top: 30px; margin-left:520px;">
                <button type="reset" class="layui-btn layui-btn-primary" style="margin-right: 10px;" id="cancel">取消</button>
                <button type="submit" class="layui-btn" id="xiugai" lay-submit lay-filter="formDemo"
                    style="background-color: #409eff;">确定</button>
                </div>
            </div>
        </form>`
    $('tbody').on('click', '.btn-edit', function () {
      // alert('编辑')
        // 弹出一个修改文章分类信息的层
        layerIndex = layer.open({
            type: 1,// 层的类型，1表示页面层
            area: ['800px', '300px'],// 宽高
            title: '修改分类', // 标题
            content: editFormStr // 内容
        })

        // ========== 编辑功能 - 发送axios请求 ==========
        // 获取到当前按钮上的自定义属性 data-id 的值
        const id = $(this).attr('data-id')
        axios.get('/ydd_tag/rowInfo?id='+id).then(({data:{data}})=>{
          // console.log(data);
          const form = layui.form
          form.val("formEdit",data)
        })
    })
  //  ========== 编辑修改内容  ==========
  $('body').on('submit', '#form-edit', function (e) {
    // 阻止默认行为
    e.preventDefault()

    const data = $(this).serialize()
    // console.log(data)
    axios.post('/ydd_tag/update', data).then(({ data: { errno, errmsg } }) => {
        if (errno !== 0) {
            // 提示失败
            return layer.msg(errmsg, { icon: 5, time: 2000 })
        }
        // 提示成功
        layer.msg('修改成功！', { icon: 1, time: 1000 })
        // 关闭弹出层
        layer.close(layerIndex)
        // 重新渲染
        render()
    })
})


   // ======= 添加和编辑弹出层的点击取消，关闭弹出层  =======

$('body').on('click', '#cancel', () => layer.close(layerIndex))



  // ======= 删除功能  =======
$('tbody').on('click','.btn-delete',function(){
  let id = $(this).attr('data-id')

  layer.confirm('确认删除此分类吗？',{icon:3, title:'删除分类'},()=>{
    axios.get('/ydd_tag/del?id='+id).then(({data:{errno,errmsg}})=>{
      if(errno !==0){
        return layer.msg(errmsg,{icon:5,time:1000})
      }
      //成功
      layer.msg('删除成功',{icon:1,time:1000})
      //关闭弹层
      layer.close(layerIndex)
      //渲染数据
      render()
    })
  })
})


})



